<template>
  <view class="content">
    <u-form class="form" :model="addAttend" ref="uForm">
      <map
        style="width: 100%; height: 300upx"
        :latitude="addAttend.latitude"
        :longitude="addAttend.longitude"
      >
      </map>
      <button
        style="margin-top: 20upx; margin-bottom: 20upx"
        type="default"
        @click="getCurrentLocation()"
      >
        获取当前位置
      </button>
      <u-form-item prop="start" class="inputWrapper">
        <view @click="show = true">开始时间: {{ addAttend.start }}</view>
      </u-form-item>
      <u-form-item prop="end" class="inputWrapper">
        <view @click="show = true">结束时间: {{ addAttend.end }}</view>
      </u-form-item>
      <u-form-item prop="longitude" class="inputWrapper">
        <u-input v-model="addAttend.longitude" placeholder="经度" />
      </u-form-item>
      <u-form-item prop="latitude" class="inputWrapper">
        <u-input v-model="addAttend.latitude" placeholder="纬度" />
      </u-form-item>
      <u-form-item prop="location" class="inputWrapper">
        <u-input v-model="addAttend.location" placeholder="地点" />
      </u-form-item>
      <view class="loginBtn">
        <view class="btnValue" @click="addAttends">提交</view>
      </view>
    </u-form>
  </view>
</template>

<script>
import api from '@/api/teach/api.js'
export default {
  data() {
    return {
      show: false,

      addAttend: {
        courseId: '', //课程id
        longitude: '113.187315', //经度
        latitude: '33.780052', //纬度
        address: '',
        start: uni.$u.timeFormat(Number(new Date()), 'yyyy-mm-dd h:M:s'),
        end: uni.$u.timeFormat(Number(new Date()), 'yyyy-mm-dd h:M:s'),
        location: '',
        type: 1,
        state: true,
      },
      courseId: '',
      title: 'map',
    }
  },
  methods: {
    confirm(e) {
      this.show = false
      const timeFormat = uni.$u.timeFormat
      this.addAttend.start = timeFormat(e.value, 'yyyy-mm-dd h:M')
    },
    cancel() {
      this.show = false
    },
    addAttends() {
      this.$http
        .getMethod(api.addAttend, this.addAttend)
        .then((res) => {
          if (res.code != 200) {
            uni.showToast({
              title: res.message,
              icon: 'none',
            })
          } else {
            uni.navigateTo({
              url:
                '/pages/teacher/detailed/detailed?id=' +
                this.addAttend.courseId,
            })
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    getCurrentLocation() {
      let that = this //在uniapp中药定义一下this才能使用
      uni.getLocation({
        type: 'wgs84',
        success: function (res) {
          console.log(res)
          that.addAttend.longitude = res.longitude
          that.addAttend.latitude = res.latitude
          that.loAcquire(that.addAttend.longitude, that.addAttend.latitude)
        },
        fail: function () {
          uni.showToast({
            title: '获取地址失败，将导致部分功能不可用',
            icon: 'none',
          })
        },
      })
    },
    // 获取当前地址
    loAcquire(longitude, latitude) {
      let that = this
      uni.showLoading({
        title: '加载中',
        mask: true,
      })
      let str = `output=jsonp&key='Fwh5gcXKfzht7iyUrn8tsxYuzDPSXATN'=${latitude},${longitude}` //记得在这里要输入密钥哦！
      this.$jsonp('https://apis.map.qq.com/ws/geocoder/v1/?' + str, {}).then(
        (res) => {
          console.log(res)
          uni.hideLoading()
          if (res.status == 0) {
            that.addAttend.address =
              '当前位置是:' + res.result.address_component.street_number //当前定位
          }
        }
      )
    },
  },
  onLoad(option) {
    this.addAttend.courseId = option.id
  },
}
</script>

<style scoped lang="less">
.content {
  padding: 20rpx;
}
.w70 {
  width: 70%;
}
.u-form-item {
  border-bottom: 1upx solid #000;
}
.loginBtn {
  width: 100%;
  height: 80upx;
  background: #77b307;
  border-radius: 50upx;
  margin-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loginBtn .btnValue {
  color: white;
}
</style>
